<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >考试管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>科目管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="exam_manager_content">
        <!-- 按钮栏 -->
        <el-row>
          <el-col :span="24">
            <div class="exam_manager_top">
              <el-button size="mini" type="primary" @click="addFn()"
                >新增</el-button
              >
              <div style="margin-left: 10px">筛选：</div>
              <el-select
                v-model="checkedLevel"
                placeholder="请选择考试等级"
                size="mini"
                @change="checkedLevelChange"
                :clearable="true"
              >
                <el-option
                  v-for="item in levelList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="checkdeAreaId"
                placeholder="请选择考点"
                size="mini"
                style="margin-left: 10px"
                @change="checkedAreaIdChange"
                :clearable="true"
              >
                <el-option
                  v-for="item in areaList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
              <el-input
                v-model="searchKey"
                placeholder="请输入关键词"
                size="mini"
                style="width: 200px; margin-left: 10px"
              ></el-input>
              <el-button
                type="primary"
                size="mini"
                style="margin-left: 5px"
                @click="searchFn()"
                >搜索</el-button
              >
            </div>
          </el-col>
        </el-row>
        <!-- 数据列表 -->
        <div v-if="examListData != undefined && examListData.length > 0">
          <el-row>
            <el-col :span="24">
              <el-table
                :data="examListData"
                border
                size="mini"
                :cell-style="cellStyleFn"
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  label="考试名称"
                  align="center"
                  min-width="140"
                >
                  <template slot-scope="scope">
                    <el-link
                      type="primary"
                      @click="detailFn(scope.$index, scope.row)"
                      >{{ scope.row.title }}</el-link
                    >
                  </template>
                </el-table-column>

                <el-table-column
                  prop="area_name"
                  label="考试等级"
                  width="100"
                  align="center"
                  :formatter="formatterLeveFn"
                >
                </el-table-column>

                <el-table-column
                  prop="area_name"
                  label="考点"
                  width="120"
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  prop="exam_date"
                  label="考试日期"
                  width="120"
                  align="center"
                ></el-table-column>

                <el-table-column
                  label="报名起止时间"
                  align="center"
                  min-width="140"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.enroll_start_time +
                      "至" +
                      scope.row.enroll_end_time
                    }}
                  </template>
                </el-table-column>

                <el-table-column
                  prop="used_count"
                  label="已报名人数"
                  width="95"
                  align="center"
                ></el-table-column>

                <el-table-column
                  prop="remain_count"
                  label="剩余人数"
                  width="90"
                  align="center"
                ></el-table-column>

                <el-table-column
                  prop="exam_money"
                  label="考试金额"
                  width="90"
                  align="center"
                ></el-table-column>

                <el-table-column
                  prop="enroll_status"
                  label="报名状态"
                  width="90"
                  align="center"
                  :formatter="formatterEnrollStatusFn"
                ></el-table-column>

                <el-table-column
                  prop="release_status"
                  label="发布状态"
                  width="90"
                  align="center"
                  :formatter="formatterReleaseStatusFn"
                ></el-table-column>

                <el-table-column label="报名开启" align="center" width="220">
                  <template slot-scope="scope">
                    <el-checkbox
                      size="mini"
                      :value="scope.row.allow_pers == '1' ? true : false"
                      @change="
                        allowCheckChange($event, scope.row, 'allow_pers')
                      "
                      >个人报名</el-checkbox
                    >
                    <el-checkbox
                      size="mini"
                      :value="scope.row.allow_orga == '1' ? true : false"
                      @change="
                        allowCheckChange($event, scope.row, 'allow_orga')
                      "
                      >机构报名</el-checkbox
                    >
                  </template>
                </el-table-column>

                <el-table-column
                  label="操作"
                  width="400"
                  itemprop=""
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="light"
                      content="查看"
                      placement="bottom"
                    >
                      <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-view"
                        @click="detailFn(scope.$index, scope.row)"
                      ></el-button>
                    </el-tooltip>

                    <el-tooltip
                      effect="light"
                      content="考场管理"
                      placement="bottom"
                    >
                      <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-setting"
                        @click="examinerFn(scope.$index, scope.row)"
                      ></el-button>
                    </el-tooltip>

                    <el-tooltip
                      effect="light"
                      content="发布"
                      placement="bottom"
                      v-if="scope.row.release_status == 1"
                    >
                      <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-upload2"
                        @click="releaseFn(scope.$index, scope.row)"
                      ></el-button>
                    </el-tooltip>

                    <el-tooltip
                      effect="light"
                      content="下架"
                      placement="bottom"
                      v-if="scope.row.release_status == 2"
                    >
                      <el-button
                        size="mini"
                        type="warning"
                        icon="el-icon-download"
                        @click="releaseFn(scope.$index, scope.row)"
                      ></el-button>
                    </el-tooltip>

                    <el-tooltip
                      effect="light"
                      content="公布成绩"
                      placement="bottom"
                      v-if="scope.row.show_score == 1"
                    >
                      <el-button
                        size="mini"
                        type="success"
                        icon="el-icon-document-checked"
                        @click="setScoreStatusFn(scope.$index, scope.row)"
                      ></el-button>
                    </el-tooltip>

                    <el-tooltip
                      effect="light"
                      content="取消公布"
                      placement="bottom"
                      v-if="scope.row.show_score == 2"
                    >
                      <el-button
                        size="mini"
                        type="warning"
                        icon="el-icon-document-checked"
                        @click="setScoreStatusFn(scope.$index, scope.row)"
                      ></el-button>
                    </el-tooltip>

                    <el-tooltip
                      effect="light"
                      content="编辑"
                      placement="bottom"
                    >
                      <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-edit-outline"
                        @click="editFn(scope.$index, scope.row)"
                        :disabled="scope.row.release_status == 2"
                      ></el-button>
                    </el-tooltip>

                    <el-tooltip
                      effect="light"
                      content="删除"
                      placement="bottom"
                    >
                      <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        @click="deleteFn(scope.$index, scope.row)"
                      ></el-button>
                    </el-tooltip>

                    <el-tooltip
                      effect="light"
                      content="导出数据"
                      placement="bottom"
                    >
                      <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-document-copy"
                        @click="uploadDataBtn(scope.$index, scope.row)"
                      ></el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="exam_manager_pagination">
                <el-pagination
                  @size-change="listSizeChange"
                  @current-change="listCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="pageSizes"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                >
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row v-else>
          <el-empty description="暂无数据"></el-empty>
        </el-row>
      </div>
    </el-row>
  </div>
</template>
<style src="../../assets/css/exam/examManager.css" scoped></style>

<script>
export default {
  name: "ExamManager",
  components: {},
  data() {
    return {
      baseAPIUrl: this.$store.state.baseAPIUrl,
      examListData: [], // 等级列表
      currentPage: 1, // 当前页
      pageSizes: [10, 20, 50, 100], // 可选页容量
      pageSize: 10, // 当前页容量
      total: 0, // 总条数
      enrollStatusList: [
        {
          key: 1,
          value: "未开始",
        },
        {
          key: 2,
          value: "可报名",
        },
        {
          key: 3,
          value: "已结束",
        },
      ], // 考试状态
      releaseStatusList: [
        {
          key: 1,
          value: "未发布",
        },
        {
          key: 2,
          value: "已发布",
        },
      ], // 发布状态
      levelList: [], // 等级列表
      areaList: [], // 考点列表
      checkdeAreaId: "", // 筛选-考点
      checkedLevel: "", // 筛选-篮球等级
      searchKey: "", // 搜索关键词
      loadingKey: false,
      loadingText: "",
    };
  },
  created: function () {
    this.getlevelListFn();
    this.getAreaListFn();
    this.getListDataFn();
  },
  methods: {
    // 获取等级列表数据
    getlevelListFn: function () {
      let that = this;
      let url = "/mobile/levelText";
      let data = {};
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            let list = [];
            response.level_list.forEach(function (item) {
              let obj = {
                key: item.level,
                value: item.title,
              };
              list.push(obj);
            });
            that.levelList = list;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取考点列表数据
    getAreaListFn: function () {
      let that = this;
      let url = "/admin/area/index";
      let data = {};
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            let list = [];
            response.area_list.forEach(function (item) {
              let obj = {
                key: item.id,
                value: item.area,
              };
              list.push(obj);
            });
            that.areaList = list;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取列表数据
    getListDataFn: function () {
      let that = this;
      let url = "/admin/exam/index";
      let data = {
        category_id: this.checkedLevel,
        area_id: this.checkdeAreaId,
        page: this.currentPage,
        perPage: this.pageSize,
        keywords: this.searchKey,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.examListData = response.exam_list;
            that.total = response.exam_count;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 新增
    addFn: function () {
      this.$router.push({
        name: "ExamFrom",
        params: {
          key: 1,
        },
      });
    },
    // 修改
    editFn: function (index, row) {
      this.$router.push({
        name: "ExamFrom",
        params: {
          id: row.id,
          key: 2,
        },
      });
    },
    // 查看
    detailFn: function (index, row) {
      const routeUrl = this.$router.resolve({
        name: "ExamFrom",
      });
      let params = {
        id: row.id,
        key: 3,
      };
      this.$store.commit("set_examManagerParams", params);
      window.open(routeUrl.href, "_blank");
    },
    // 管理员管理
    examinerFn: function (index, row) {
      this.$router.push({
        name: "ExaminerManager",
        params: {
          id: row.id,
        },
      });
    },
    // 发布/下架
    releaseFn: function (index, row) {
      let that = this;
      let url = "/admin/exam/publish";
      let data = {};
      let text = "";
      if (row.release_status == 1) {
        text = "发布";
        data = {
          id: row.id,
          release_status: 2,
        };
      } else {
        text = "下架";
        data = {
          id: row.id,
          release_status: 1,
        };
      }
      this.$confirm("确认" + text + "该考试?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        that.loadingText = "处理中...";
        that.loadingKey = true;
        that.axios
          .post(url, data)
          .then((response) => {
            that.loadingKey = false;
            if (response.code == 0) {
              that.$message.success(text + "成功");
              that.getListDataFn();
            } else {
              that.$message.error(response.msg);
            }
          })
          .catch(function (error) {
            that.loadingKey = false;
            console.log(error);
          });
      });
    },
    // 发布/下架
    setScoreStatusFn: function (index, row) {
      let that = this;
      let url = "/admin/exam/changeScoreStatus";
      let data = {};
      let text = "";
      if (row.show_score == 1) {
        text = "确认公布该考试成绩？";
        data = {
          id: row.id,
          status: 2,
        };
      } else {
        text = "确认取消公布该考试成绩？";
        data = {
          id: row.id,
          status: 1,
        };
      }
      this.$confirm(text, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        that.loadingText = "处理中...";
        that.loadingKey = true;
        that.axios
          .post(url, data)
          .then((response) => {
            that.loadingKey = false;
            if (response.code == 0) {
              that.$message.success("操作成功");
              that.getListDataFn();
            } else {
              that.$message.error(response.msg);
            }
          })
          .catch(function (error) {
            that.loadingKey = false;
            console.log(error);
          });
      });
    },

    // 删除
    deleteFn: function (index, row) {
      let that = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        let url = "/admin/exam/destroy";
        let data = {
          id: row.id,
        };
        that.loadingText = "处理中...";
        that.loadingKey = true;
        that.axios
          .post(url, data)
          .then((response) => {
            that.loadingKey = false;
            if (response.code == 0) {
              that.$message.success("删除成功");
              let next = that.currentPage - 1;
              if (that.examListData.length == 1) {
                that.currentPage = next >= 1 ? next : 1;
              }
              that.getListDataFn();
            } else {
              that.$message.error(response.msg);
            }
          })
          .catch(function (error) {
            that.loadingKey = false;
            console.log(error);
          });
      });
    },
    // 导出数据
    uploadDataBtn: function (index, row) {
      let that = this;
      let url = "/admin/exam/generateExamStuExportId";
      let data = {
        exam_id: row.id,
      };
      that.loadingText = "处理中...";
      that.loadingKey = true;
      that.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            let uploadId = response.id;
            const link = document.createElement("a");
            link.setAttribute(
              "href",
              this.baseAPIUrl + "/excel/exportexamorderstu/" + uploadId
            );
            link.setAttribute("target", "_blank");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 页容量改变
    listSizeChange: function (val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getListDataFn();
    },
    // 当前页改变
    listCurrentChange: function (val) {
      this.currentPage = val;
      this.getListDataFn();
    },
    // 考试状态格式化
    formatterEnrollStatusFn: function (row) {
      let status = row.enroll_status;
      let text = "";
      this.enrollStatusList.forEach(function (item) {
        if (item.key == status) {
          text = item.value;
        }
      });
      return text;
    },
    // 等级格式化
    formatterLeveFn: function (row) {
      let exam_level = row.exam_level;
      let text = "";
      this.levelList.forEach(function (item) {
        if (item.key == exam_level) {
          text = item.value;
        }
      });
      return text;
    },
    // 发布状态格式化
    formatterReleaseStatusFn: function (row) {
      let status = row.release_status;
      let text = "";
      this.releaseStatusList.forEach(function (item) {
        if (item.key == status) {
          text = item.value;
        }
      });
      return text;
    },
    // 设置单元格字体颜色
    cellStyleFn: function ({ row, columnIndex }) {
      let style = "";
      if (columnIndex == 7) {
        if (row.remain_count == 0) {
          style = "color: #F6705E";
        }
      }
      if (columnIndex == 9) {
        if (row.enroll_status == 2) {
          style = "color: #8ECF5F";
        } else {
          style = "color: #F6705E";
        }
      }
      if (columnIndex == 10) {
        if (row.release_status == 2) {
          style = "color: #8ECF5F";
        } else {
          style = "color: #F6705E";
        }
      }
      return style;
    },
    // 等级筛选
    checkedLevelChange: function (val) {
      this.checkedLevel = val;
      this.currentPage = 1;
      this.getListDataFn();
    },
    // 考点筛选
    checkedAreaIdChange: function (val) {
      this.checkdeAreaId = val;
      this.currentPage = 1;
      this.getListDataFn();
    },
    // 搜索按钮
    searchFn: function () {
      this.currentPage = 1;
      this.getListDataFn();
    },
    // 报名开启勾选切换
    allowCheckChange: function (val, row, setKey) {
      let key = setKey;
      let that = this;
      let url = "/admin/exam/changeEnrollStatus";
      let data = {
        exam_id: row.id,
      };
      if (key == "allow_pers") {
        data.allow_pers = val ? 1 : 2;
        data.allow_orga = row.allow_orga;
      } else if (key == "allow_orga") {
        data.allow_pers = row.allow_pers;
        data.allow_orga = val ? 1 : 2;
      }
      that.loadingText = "处理中...";
      that.loadingKey = true;
      that.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.$message.success("操作成功");
            that.getListDataFn();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
  },
};
</script>
